<!--
 * @Description: 
 * @Author: zhanyinjia
 * @Date: 2022-10-17 17:56:35
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2023-02-09 14:33:23
-->
<template>
  <div>
    <div id="mountNode1"></div>
    <div id="mountNode2"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6'
import nodelist1 from '@/data/nodelist1'
import nodelist2 from '@/data/nodelist2'
export default {
  name: '',
  data() {
    return {
      nodelist1,
      nodelist2
    }
  },
  mounted() {
    this.initFlow1()
    this.initFlow2()
  },
  methods: {
    initFlow2() {
      const graph = new G6.Graph({
        container: 'mountNode2',
        width: 800,
        height: 400,
        fitView: true,
        animate: true,
        defaultNode: {
          size: 50,
          labelCfg: {
            style: {
              fill: '#000'
            }
          }
        },
        defaultEdge: {
          weight: 1,
          style: {
            stroke: '#000',
            endArrow: {
              // 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
              path: 'M 0,0 L 10,5 L 10,-5 Z',
              // 箭头的偏移量，负值代表向 x 轴正方向移动
              // d: -10,
              // v3.4.1 后支持各样式属性
              fill: '#333',
              stroke: '#666',
              opacity: 0.8
              // ...
            }
          }
        }
      })

      graph.data(this.nodelist2)
      graph.render()
    },
    initFlow1() {
      const graph = new G6.Graph({
        container: 'mountNode1',
        width: 800,
        height: 400,
        fitView: true,
        animate: true,
        defaultNode: {
          size: 50,
          labelCfg: {
            style: {
              fill: '#000'
            }
          }
        },
        layout: {
          type: 'dagre',
          rankdir: 'LR',
          align: 'DL',
          nodesepFunc: () => 1,
          ranksepFunc: () => 1
        },
        defaultEdge: {
          weight: 1,
          style: {
            stroke: '#000',
            endArrow: {
              // 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
              path: 'M 0,0 L 10,5 L 10,-5 Z',
              // 箭头的偏移量，负值代表向 x 轴正方向移动
              // d: -10,
              // v3.4.1 后支持各样式属性
              fill: '#333',
              stroke: '#666',
              opacity: 0.8
              // ...
            }
          }
        }
      })

      this.nodelist1.nodes.forEach((node) => {
        node.label = this.fittingString(node.label, 40)
      })

      graph.data(this.nodelist1)
      graph.render()
    },
    fittingString(label, maxWidth, fontSize = 12) {
      const wrap = '\n'
      let currentWidth = 0
      const pattern = new RegExp('[\u4E00-\u9FA5]+')
      let res = label.split('').reduce((prev, next, i) => {
        if (currentWidth > maxWidth) return
        if (pattern.test(next)) {
          currentWidth += fontSize
        } else {
          currentWidth += G6.Util.getLetterWidth(prev, fontSize)
        }
        console.log(currentWidth)
        if (currentWidth > maxWidth) {
          if (i < label.length - 1) {
            prev += `${next}${wrap}`
          } else {
            prev += `${next}`
          }

          currentWidth = 0
        } else {
          prev += `${next}`
        }
        return prev
      }, '')
      return res
    }
  }
}
</script>

<style lang="" scoped>
</style>